import React, { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import MarkNav from 'markdown-navbar';

import rehypeRaw from 'rehype-raw'; 
import gfm from 'remark-gfm';
import 'github-markdown-css';
import './index.less'
import { FloatButton } from 'antd';

const Explain = () => {
    const mdUrl = `/markdowm/explain.md`;

    const [mdContent, setMdContent] = useState('');

    useEffect(() => {
        fetch(mdUrl)
            .then(res => res.text())
            .then(text => setMdContent(text));
    }, []);

    const components = {
        p: (props) => <p style={{ fontSize: '16px' }}>{props.children}</p>,
        li: (props) => <li style={{ fontSize: '16px' }}>{props.children}</li>,
    };

    const downUrl = 'https://pan.baidu.com/s/1HaJFt4Favqupc177dugo9A?pwd=n2mj'

    return (
        <div>
            <div className='markdown-container'>
                <ReactMarkdown 
                    className="markdown-body" 
                    rehypePlugins={[rehypeRaw]} 
                    remarkPlugins={[gfm]} 
                    children={mdContent}
                    components={components}
                />
                <div className="markdown-nav">
                    <h2>目录</h2>
                    <MarkNav className="markdown-nav-item" source={mdContent} />
                </div>
                <FloatButton.BackTop onClick={() => console.log('onClick')} />
            </div>

            <div className='download'>
                <div className='font-style'>资源下载</div>
                <a  href={downUrl}>{downUrl}</a>

            </div>
        </div>
    );
};

export default Explain;